<template>
	<view style="padding-bottom: 180rpx;">
		<view class="back" @click="back">
			<uni-icons type="left" size="30"></uni-icons>
		</view>
		<view class="parent">
			<!-- 轮播图 -->
			<swiper @change="monitorCurrent" :indicator-dots="false" :circular="true" :indicator-color="white"
				:indicator-active-color="orange" :current="current" circular="true">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item>
						<image :src="item" mode="scaleToFill"></image>
					</swiper-item>
				</block>
			</swiper>
			<!-- 自定义轮播图进度点 -->
			<view class="dots">{{current+1}}/{{banner.length}}</view>
		</view>
		<view class="details">
			<view class="title">
				<view class="goodTitle">
					{{goodData.name}}
				</view>
				<view class="goodSale">
					已售{{goodData.purchaseSalesCount}}
				</view>
			</view>
			<view class="info">
				{{goodData.context}}
			</view>
			<view class="goodPrice" v-if="member&&goodData.specsList[0].levelPrice">
				<text style="font-size: 20rpx;">￥</text>{{(goodData.specsList[0].levelPrice/100).toFixed(2)}}
				<text class="oldPrice">￥{{(goodData.specsList[0].price/100).toFixed(2)}}</text>
			</view>
			<view class="goodPrice" v-else>
				<text style="font-size: 20rpx;">￥</text>{{(goodData.specsList[0].price/100).toFixed(2)}}
			</view>
		</view>
		<view class="speci">
			已选<text style="margin-left: 42rpx;">{{goodData.specsList[0].name}}</text>
		</view>
		<view class="good">
			<view class="infoTitle">
				<view class="hr">

				</view>
				<view class="infoTop">
					商品详情
				</view>
				<view class="hr">

				</view>
			</view>
			<!-- <view class="infoBox">
				<view class="box1">
					<view class="boxLeft">
						品类
					</view>
					<view class="boxRight">
						啤酒
					</view>
				</view>
				<view class="box1">
					<view class="boxLeft">
						商品条形码
					</view>
					<view class="boxRight">
						256977554899
					</view>
				</view>
			</view> -->
			<!-- <view class="infoTitle">
				<view class="hr">

				</view>
				<view class="infoTop">
					图片展示
				</view>
				<view class="hr">

				</view>
			</view> -->
		</view>
		<rich-text class="goodsImg" :nodes="goodData.description">

		</rich-text>
		<view class="boot">
			<view class="bootNewL">
				<u-icon label="主页" labelSize="10px" size="30" name="home" color="#EA823D" labelPos="bottom" @click="toHome"></u-icon>
				<u-icon label="购物车" labelSize="10px" size="30" name="shopping-cart" color="#EA823D" labelPos="bottom" @click="shopCart"></u-icon>
			</view>
			<view class="bootNewR" @click="chekcSkuEmit">
				<view class="bootLeft">
					<view class="bootBut">
						<image class="butIcon" src="../../static/images/dealis/shoop.png"></image>
						<view class="bootTxt">
							加入购物车
						</view>
					</view>
				</view>
				<view class="bootReight">
					<view class="bootBut">
						<image class="butIcon" src="../../static/images/dealis/add.png"></image>
						<view class="bootTxt">
							去结算
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" :round="10" :closeable="true" :safeAreaInsetTop="true"
			:safeAreaInsetBottom="false">
			<view class="pupBox">
				<view class="goodsInfo">
					<image class="pupImg" :src="checkedSku.picUrl"></image>
					<view class="pupRighr">
						<view class="goodPrice2" v-if="member&&goodData.specsList[0].levelPrice">
							<text style="font-size: 20rpx;">￥</text>{{(checkedSku.levelPrice/100).toFixed(2)}}
							<text class="oldPrice">￥{{(goodData.specsList[0].price/100).toFixed(2)}}</text>
						</view>
						<view class="goodPrice2" v-else>
							<text style="font-size: 20rpx;">￥</text>{{(checkedSku.price/100).toFixed(2)}}
						</view>
						<view class="stand">

						</view>
						<view class="stock">
							库存：{{checkedSku.stock || 0}}
						</view>
						<view class="check">
							已选：{{checkedSku.name}}
						</view>
					</view>
				</view>
				<view class="pupTitle">
					规格
				</view>
				<!-- <view class="specifi" v-if="member">
					<view v-for="(item,index) in goodData.specsList" :key="index">
						<view :class="checkedSku.id==item.id?'specLi':'specLi2'" @click="skuEmit(item)">
							{{item.name}}
						</view>
					</view>
				</view> -->
				<view class="specifi">
					<view v-for="(item,index) in goodData.specsList" :key="index">
						<view :class="checkedSku.id==item.id?'specLi':'specLi2'" @click="skuEmit(item)"
							v-if="item.stock">
							{{item.name}}
						</view>
						<view class="specLi3" v-else>
							{{item.name}}
							<view class="stickIcon">
								缺货
							</view>
						</view>
					</view>
				</view>
				<view class="pupTitle">
					<view class="number2">
						数量
					</view>
					<view class="numberInput">
						<u-number-box min="1" :max="checkedSku.stock" v-model="value">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="12"></u-icon>
							</view>
							<input slot="input" style="width: 150rpx;text-align: center;" class="input" v-model="value"
								@change="numberChange" />
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
							</view>
						</u-number-box>
					</view>
				</view>
				<view class="boot2">
					<view class="bootLeft2" @click="joinCat">
						<view class="bootBut">
							<image class="butIcon" src="../../static/images/dealis/shoop.png"></image>
							<view class="bootTxt">
								加入购物车
							</view>
						</view>
					</view>
					<view class="bootReight2">
						<view class="bootBut">
							<image class="butIcon" src="../../static/images/dealis/add.png"></image>
							<view class="bootTxt" @click="joinCat(1)">
								去结算
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import index from "../../uni_modules/uview-ui"
import {
		getGoodsDetails,
		addGoodsInCat,
	} from "@/api/wine/wine.js"
	export default {
		data() {
			return {
				current: 0,
				show: false,
				value: 1,
				id: '',
				banner: [], //轮播
				goodData: {
					specsList: [{
						price: 0
					}, ]
				},
				checkedSku: {}, //选中的sku
				member: false, //是否展示会员价
				customerId: '', //商户id
				deskNum: '', //桌号
			}
		},
		onLoad(e) {
			this.id = e.id
			if (e.type == 2) {
				this.member = true
			} else {
				this.customerId = uni.getStorageSync('customerId')
				this.deskNum = uni.getStorageSync('deskNum')
			}
			this.getGoodsDeta()
		},
		methods: {
			//判断是否含有指定身份的函数
			containsValueInArray(value) {
				let array = this.$store.getters.tagIds
				let ret = false
				value.forEach(item => {
					if (array.includes(item)) {
						ret = true
					}
				});
				return ret;
			},
			//跳转首页
			toHome(){
				uni.switchTab({
					url: '/pages/index'
				})
			},
			// 跳转购物车
			shopCart(){
				if(this.containsValueInArray([1])){
					this.$tab.navigateTo('/pages/shopCart/shopCart?type=' + true)
				}else{
					uni.$u.toast('成为商户后重试')
				}
			},
			//数量判断事件
			numberChange() {
				// console.log('444')
				if (!isNaN(this.value)) {
					// 如果是数字，直接取整（舍去小数部分）
					this.value = Math.floor(this.value);
				}
				if (this.value < 1) {
					this.value = 1
				} else if (this.value > this.checkedSku.stock) {
					uni.showToast({
						title: '不能超过最大库存',
						icon: 'none'
					})
					this.value = this.checkedSku.stock
				}
			},
			//判断是否含有指定身份的函数
			containsValueInArray(value) {
				let array = this.$store.getters.tagIds
				let ret = false
				value.forEach(item => {
					if (array.includes(item)) {
						ret = true
					}
				});
				return ret;
			},
			//添加进购物车
			joinCat(e) {
				let that = this
				if (!that.containsValueInArray([1])) {
					uni.showToast({
						title: '请成为商户后下单',
						icon: 'none'
					})
					return false
				}
				if (!that.checkedSku.id) {
					uni.$u.toast('请选择规格')
					// console.log('openid',uni.getStorageSync('openid'))
					return false
				}
				if (!that.checkedSku.stock) {
					uni.showToast({
						title: '当前选择库存为0',
						icon: 'none'
					})
					return false
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let orderType = 1
				if (that.member) {
					// console.log('sahnghu')
					orderType = 2
				} else {
					if (!that.deskNum) {
						uni.$u.toast('请扫码后点餐')
						// console.log('openid',uni.getStorageSync('openid'))
						return false
					}
				}
				let data = {
					specsId: that.checkedSku.id,
					count: that.value,
					// customerId: that.customerId,
					type: orderType
				}
				console.log('参数', data)
				addGoodsInCat(data).then(response => {
					uni.hideLoading()
					if (response.code == 0) {
						uni.$u.toast('添加成功')
						that.value = 1
						that.show = false
						that.checkedSku = {}
						uni.showTabBar()
						if (e == 1) {
							that.trigger()
						}
					}
				})
			},
			//跳转购物车
			trigger() {
				this.$tab.navigateTo('/pages/shopCart/shopCart?type=' + this.member)
			},
			//规格点击事件
			skuEmit(e) {
				this.checkedSku = e
				this.value = 1
			},
			chekcSkuEmit() {
				if (this.member) {
					this.checkedSku = this.goodData.specsList[0]
					this.show = true
				} else {
					if (this.customerId) {
						this.checkedSku = this.goodData.specsList[0]
						this.show = true
					} else {
						uni.$u.toast('请扫码后点餐')
					}
				}

			},
			//获得商品详情
			getGoodsDeta() {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					id: that.id,
					merchantId: that.customerId
				}
				getGoodsDetails(data).then(response => {
					uni.hideLoading()
					if (response.code == 0) {
						that.goodData = response.data
						that.banner = that.goodData.sliderPicUrls
						console.log('shuju', that.goodData)
					}
				})
			},
			monitorCurrent(e) {
				this.current = e.detail.current;
			},
			back() {
				this.$tab.navigateBack()
			},
			//弹窗事件
			open() {
				// console.log('open');
				uni.hideTabBar()
			},
			close() {
				this.show = false
				this.checkedSku = {}
				// console.log('close');
				uni.showTabBar()
			},
		}
	}
</script>

<style lang="scss">
	.parent {
		position: relative;
		width: 100%;
		height: 694rpx;
	}

	.imgc {
		width: 100%;
		height: 100%;
	}

	/* 轮播的样式 */
	swiper {
		height: 694rpx;
	}

	swiper-item image {
		height: 100%;
		width: 100%;
	}

	.dots {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		width: 70rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 20rpx;
		background-color: rgba(0, 0, 0, 0.4);
		color: #fff;
	}

	.back {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		position: fixed;
		top: 90rpx;
		z-index: 66;
	}

	/* 轮播下 */
	.details {
		width: 750rpx;
		height: 200rpx;
		background-color: white;
		overflow: hidden;
	}

	.title {
		width: 690rpx;
		height: 50rpx;
		margin: 30rpx auto 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.goodTitle {
		width: 650rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 32rpx;
		color: #131313;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.goodSale {
		width: 100rpx;
		text-align: end;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.info {
		width: 690rpx;
		height: 60rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		margin: 0 auto;
		color: #999999;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.goodPrice {
		width: 690rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #E84E22;
		margin: 0 auto;
	}

	/* 已选规格 */
	.speci {
		width: 750rpx;
		height: 60rpx;
		background-color: white;
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #999999;
		line-height: 60rpx;
		padding: 0 30rpx;
	}

	.good {
		width: 750rpx;
		// height: 350rpx;
		background-color: white;
		margin-top: 30rpx;
		overflow: hidden;
	}

	.infoTitle {
		width: 690rpx;
		height: 40rpx;
		margin: 30rpx auto;
		line-height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hr {
		width: 50rpx;
		height: 2rpx;
		background-color: #F1F1F1;
	}

	.infoTop {
		width: 130rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: #131313;
		text-align: center;
	}

	.infoBox {
		width: 690rpx;
		height: 160rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
		margin: 0 auto;
		overflow: hidden;
	}

	.box1 {
		width: 630rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.boxLeft {
		width: 200rpx;
		height: 50rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.boxRight {
		width: 400rpx;
		height: 50rpx;
		font-size: 24rpx;
		color: #131313;
	}

	.goodsImg {
		width: 750rpx;
		height: fit-content;
	}

	.goodsImg image {
		max-width: 100%;
	}

	.goodsImg [src] {
		max-width: 100%;
	}

	/* 吸底 */
	.boot {
		width: 750rpx;
		height: 150rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
	}

	.bootNewL {
		width: 200rpx;
		height: 100rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.bootNewR {
		width: 500rpx;
		height: 100rpx;
		margin-top: 20rpx;
		display: flex;
	}

	.bootLeft {
		width: 250rpx;
		height: 80rpx;
		background: #EA823D;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.bootLeft2 {
		width: 300rpx;
		height: 80rpx;
		background: #EA823D;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.bootReight {
		width: 250rpx;
		height: 80rpx;
		background: #E84E22;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.bootReight2 {
		width: 300rpx;
		height: 80rpx;
		background: #E84E22;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.bootBut {
		width: 150rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 0 auto;
	}

	.butIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.bootTxt {
		width: 120rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 23rpx;
		color: #FFFFFF;
		text-align: center;
	}

	/* 弹出层 */
	.pupBox {
		width: 750rpx;
		/* height: 700rpx; */
	}

	.goodsInfo {
		width: 690rpx;
		height: 200rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.pupImg {
		width: 200rpx;
		height: 200rpx;
	}

	.pupRighr {
		width: 450rpx;
		height: 200rpx;
	}

	.goodPrice2 {
		width: 450rpx;
		height: 50rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #E84E22;
		margin: 0 auto;
	}

	.stand {
		width: 450rpx;
		height: 60rpx;
	}

	.stock {
		width: 450rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		color: #F16645;
	}

	.check {
		width: 450rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.pupTitle {
		width: 690rpx;
		height: 40rpx;
		line-height: 40rpx;
		margin: 60rpx auto 30rpx auto;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		justify-content: space-between;
	}

	.specifi {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.specLi {
		// width: 200rpx;
		padding: 0 25rpx;
		height: 60rpx;
		margin: 30rpx 15rpx 0 15rpx;
		line-height: 60rpx;
		text-align: center;
		background: #F1F1F1;
		border-radius: 28rpx;
		border: 1rpx solid #E84E22;
	}

	.specLi2 {
		// width: 200rpx;
		padding: 0 25rpx;
		height: 60rpx;
		margin: 30rpx 15rpx 0 15rpx;
		line-height: 60rpx;
		text-align: center;
		background: #F1F1F1;
		border-radius: 28rpx;
	}

	.number2 {
		// width: 550rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.number {
		width: 500rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.numberInput {
		min-width: 100rpx;
		height: 40rpx;
	}

	// 数量
	.minus {
		width: 28rpx;
		height: 28rpx;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 28rpx;
		height: 28rpx;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.boot2 {
		width: 690rpx;
		height: 150rpx;
		background-color: white;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}

	.specLi3 {
		// width: 200rpx;
		padding: 0 25rpx;
		height: 60rpx;
		margin: 30rpx 15rpx 0 15rpx;
		line-height: 60rpx;
		text-align: center;
		background: #F1F1F1;
		border-radius: 28rpx;
		color: #666;
		position: relative;
		overflow: hidden;
	}

	.stickIcon {
		position: absolute;
		width: 80rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 15rpx;
		text-align: center;
		top: 0;
		right: 0;
		background-color: rgba(255, 141, 2, 0.8);
		color: white;
		border-bottom-left-radius: 28rpx;
	}

	.oldPrice {
		font-size: 18rpx;
		text-decoration: line-through;
		color: #999999;
		margin-left: 10rpx;
	}
</style>